과제 체크포인트

배포 링크

https://milmilkim.github.io/front_7th_chapter4-1/vanilla/
https://milmilkim.github.io/front_7th_chapter4-1/react/

기본과제 (Vanilla SSR & SSG)

Express SSR 서버

• Express 미들웨어 기반 서버 구현
• 개발/프로덕션 환경 분기 처리
• HTML 템플릿 치환 (<!--app-html-->, <!--app-head-->)

서버 사이드 렌더링

• 서버에서 동작하는 Router 구현
• 서버 데이터 프리페칭 (상품 목록, 상품 상세)
• 서버 상태관리 초기화

클라이언트 Hydration

• window.__INITIAL_DATA__ 스크립트 주입
• 클라이언트 상태 복원
• 서버-클라이언트 데이터 일치

Static Site Generation

• 동적 라우트 SSG (상품 상세 페이지들)
• 빌드 타임 페이지 생성
• 파일 시스템 기반 배포

심화과제 (React SSR & SSG)

React SSR

• renderToString 서버 렌더링
• TypeScript SSR 모듈 빌드
• Universal React Router (서버/클라이언트 분기)
• React 상태관리 서버 초기화

React Hydration

• Hydration 불일치 방지
• 클라이언트 상태 복원

Static Site Generation

• 동적 라우트 SSG (상품 상세 페이지들)
• 빌드 타임 페이지 생성
• 파일 시스템 기반 배포

아하! 모먼트 (A-ha! Moment)

하이드레이션이 무엇인지 근본적으로 알 수 있게 되었다. 전에는 그냥 그런 게 있나보다 했는데 이제 왜 하는 것인지 알게 되었다.
나의 서버 사이드 렌더링은 과거의 PHP 정도 지식에 머물러있어서 그 SSR과 Next와 같은 프레임워크의 SSR의 차이를 알 수 있었다.
서버에서 렌더링한 HTML과 클라이언트의 HTML을 일치 시켜야 한다는 것과,
왜 그렇게 Next.js를 쓰면 하이드레이션 오류가 발생하는 것인지도 알 수 있었다.

서버로 인한 레이스 컨디션과 같은 문제도 왜 발생하는지, 독립적 컨텍스트가 왜 필요하는지도 알 수 있었다.

추가로 VITE에서 꽤 많은 걸 해준다는 것을 배웠다.
https://ko.vite.dev/guide/ssr

사실 회사에서 내가 맡은 프로젝트는 대부분 CSR이었다. 홈페이지성 프로젝트가 아니어서 굳이 사용할 필요도 없다고 생각했고, 인프라 쪽 문제도 있을 거 같았다.
Nuxt2 프레임워크를 사용한 프로젝트도 있었으나 서버 사이드 기능을 사용하지 않았다. SSG로 빌드했었는데 왜 굳이 SSG로 만들었을까 항상 궁금했었다. 금주 과제를 진행하면서, 그래도 SEO나 첫 화면의 빠른 렌더링 면에서는 SSG였어서 이득이 있었을 것이라는 생각이 들었다.

자유롭게 회고하기

과제를 뭐부터 시작해야 할지 모르겠어서 무작정 VITE의 SSR문서를 보았더니 대략적으로 감을 잡을 수 있었다.
서버에서 HTML을 만들어서 내려준다는 것 자체는 이전의 PHP라든가...그런 것들이 있었기 때문에 낯설지 않았는데
CSR는 CSR대로 잘 되면서 SSR로도 호환되게 만든다는 게 어렵게 느껴졌다.
MSW와 같은 설정이 너무 힘들게 느껴지기도 했다.

SSR 프레임워크는 깊게 다뤄보지 않았어서 별로 자신 없는 분야였는데 과제를 하면서 전체적인 컨셉을 알 수 있어서 좋았다.

리액트로 전환하는 작업은 더 어렵게 느껴지는데.... 넥스트가 없었다면 서버사이드 렌더링을 하기 위해 참 힘든 작업을 해야겠구나 하고 느꼈다.
프레임워크라는 게 있어야 사람을 구하기도 편하고 유지보수하기도 편한 것 같다.

리뷰 받고 싶은 내용

1. 저는 굳이 SSR이 필요 없으면 안 해도 된다고 생각했는데, 보안 때문에 SSR를 사용했다는 의견을 들은 적이 있습니다. 민감한 로직을 클라이언트에 노출시키지 않기 위해서나, 인증이 필요한 페이지가 일시적으로 노출되는 것을 방지하기 위해서입니다. SSR 없이 CSR + 백엔드 API 구조나 라우터 만으로 일반적으로 보안 요구사항을 충족할 수 있는 것인지, 반드시 SSR를 사용하는 게 맞는지 궁금합니다.

2. SSR/SSG 기능을 사용하지 않더라도 Next.js나 Nuxt.js 같은 프레임워크를 사용하는 것이 괜찮은 선택인가요? 프레임워크 자체의 이점(파일 기반 라우팅, 구조화 등)이 있다고 하는데, 오히려 복잡도만 올리는 건 아닐지 궁금합니다.

3. 컴포넌트에서 메모리 누수가 발생했을 때, 서버 메모리 누수로도 이어질 수 있나요?